import Vue from 'vue'

// CSS重置的现代替代方案
import 'normalize.css/normalize.css'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// import locale from 'element-ui/lib/locale/lang/en' // 导入英文语言包

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // 导入icon的逻辑执行
import '@/permission' // 导入登录访问控制的逻辑

// process.env.NODE_ENV nodejs中自带的一个环境变量(变量: 本质就是一个存储的容器)  name='zs'  name='ls'
// yarn dev: 'development'
// yarn build: 'production'
// if (process.env.NODE_ENV === 'production') {
//   // 当你处于生产环境(代码上线)  开启mock 模拟假数据
//   const { mockXHR } = require('../mock')
//   mockXHR()
// }

// process.env.xxx
// console.log(process.env.NODE_ENV, process.env.VUE_APP_NAME)

// 你如果希望组件库的语言模式是英文
// Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
Vue.use(ElementUI)

// 所有页面都可以获取到这个方法
// 一般往原型上挂载的属性或者方法 都是以$作为前缀 (避免重名)
Vue.prototype.$have = (str) => {
  return store.state.user.userInfo.roles?.points?.includes(str)
}

// 通过自定义指令完成按钮权限的控制:
// Vue.component()
// Vue.directive('指令名', 指令配置对象)  <button v-have="str">添加员工</button>   str: 'add-employee'
Vue.directive('have', {
  // 指令所在的元素插入页面时自动触发这个函数
  inserted(el, binding) {
    // el => 指令所在的元素
    // binding.value => 指令的值
    // 需要根据binding.value 按钮的标识去用户信息中查找有无该标识
    if (store.state.user.userInfo.roles?.points?.includes(binding.value)) {
      // 有标识 有权限
    } else {
      // 没有标识 没有权限 => 让el隐藏
      // el.style.display = 'none'
      el.remove() // 直接删除当前节点
    }
  }

  // 指令的值发生变化时自动触发这个函数
  // update(el, binding) {}
})

Vue.prototype.$num = 99

Vue.config.productionTip = false

// 创建vue实例 管理项目中的唯一页面(将App根组件渲染在#app盒子中  注入路由 注入仓库)
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})
